<template>
  <div class="container">
      <div class="search-top">
        <div class="search-item">
          <div class="title">仓库编码</div>
          <el-input />
        </div>
        <div class="search-item">
          <div class="title">仓库名称</div>
          <el-input/>
        </div>
        <div class="search-item">
          <div class="title">仓库类型</div>
          <el-select>
            <el-option value="null" label="全部"/>
            <el-option value="1" label="启用"/>
            <el-option value="0" label="停用"/>
          </el-select>
        </div>
      </div>
      <div class="search-second">
        <div class="search-item" >
          <div class="title">省/市/区</div>
          <el-input style="width:217%"/>
        </div>
      </div>
      <div class="search-third">
        <div class="search-item" >
          <div class="title">仓库编码</div>
          <el-input style="width:217%"/>
        </div>
        <div class="search-item" >
          <div class="title">仓库状态</div>
          <div style="display:flex;align-items:center;height:68px">
              <el-radio v-model="radio" label="1">停用</el-radio>
              <el-radio v-model="radio" label="2">启用</el-radio>
          </div>
        </div>

      </div>
      <div class="search-top">
        <div class="search-item">
          <div class="title">仓库面积</div>
          <el-input />
        </div>
        <div class="search-item">
          <div class="title">负责人</div>
          <el-input/>
        </div>
        <div class="search-item">
          <div class="title">联系电话</div>
          <el-select>
            <el-option value="null" label="全部"/>
            <el-option value="1" label="启用"/>
            <el-option value="0" label="停用"/>
          </el-select>
        </div>
      </div>
        <div class="btn" style="display:flex;flex-direction: row;align-self:center;margin-top:8px">
          <el-button class="el-button1" @click="searchBtn">搜索</el-button>
          <el-button class="el-button2" @click="resetBtn">重置</el-button>
        </div>
  </div>
</template>

<script>
export default {
  nane: 'add',
  data () {
    return {
      radio: null
    }
  }

}
</script>

<style lang="less" scoped>
.container{
 min-width: 100%;
 height: 410px;
//  margin: 0 30px;
 padding: 30px;
 background-color: #fff;
 border-radius: 10px;
 box-shadow: 3px 3px  10px gray;
 /deep/.search-top{
  display: flex;
   justify-content: space-between;
 }
  /deep/.search-item{
    display: flex;
    flex-direction: column;
    width: 30% !important;
    height: 68px;
    margin-top: 10px;
    // background-color: #fff;
    .el-input__inner{
      background-color: #f3ebeb!important;
      border:unset !important;
      border-radius: 10px!important;;
    }
    .el-input__inner:hover{
      border:1px solid rgb(122, 121, 121) !important;
    }
  }
  /deep/.search-third{
    display: flex;
    justify-content: space-between;
    .el-radio.is-focus{
      color: orange;
    }
      .el-radio__inner:hover{
        border: 1px solid orange !important;
      }
      .el-radio__inner{
        border: 1px solid rgb(214, 213, 212) !important;
      }
      // .el-radio__input.is-checked .el-radio__inne{
      //   background-color: orange !important;
      // }
        .el-radio.is-checked .el-radio__input.is-checked .el-radio__inner {
           border-color: orange;
           background: orange;
        }
         .el-radio.is-checked .el-radio__label {
           color:orange ;
        }

  }
}

</style>
